<template>
  <div class="shelf-footer" v-show="isEditMode">
    <div class="shelf-footer-tab-wrapper" v-for="item in tabs" :key="item.index" @click="onTabClick(item)">
      <div class="shelf-footer-tab" :class="{'is-selected': isSelected}">
        <div class="icon-private tab-icon" v-if="item.index === 1 && !isPrivate"></div>
        <div class="icon-private-see tab-icon" v-if="item.index === 1 && isPrivate"></div>
        <div class="icon-download tab-icon" v-if="item.index === 2 && !isDownload"></div>
        <div class="icon-download-remove tab-icon" v-if="item.index === 2 && isDownload"></div>
        <div class="icon-move tab-icon" v-if="item.index === 3"></div>
        <div class="icon-shelf tab-icon" v-if="item.index === 4"></div>
        <div class="tab-text" :class="{'remove-text': item.index === 4}">{{label(item)}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import { storeShelfMixin } from '../../utils/mixin'
  import { saveBookShelf, removeLocalStorage } from '../../utils/localStorage'
  import { download, removeFromShelf } from '../../api/store'
  import { removeLocalForage } from '../../utils/localForage'

  export default {
    mixins: [storeShelfMixin],
    computed: {
      isSelected() {
        return this.shelfSelected && this.shelfSelected.length > 0
      },
      tabs() {
        return [
          {
            label: this.$t('shelf.private'),
            label2: this.$t('shelf.noPrivate'),
            index: 1
          },
          {
            label: this.$t('shelf.download'),
            label2: this.$t('shelf.delete'),
            index: 2
          },
          {
            label: this.$t('shelf.move'),
            index: 3
          },
          {
            label: this.$t('shelf.remove'),
            index: 4
          }
        ]
      },
      // 计算属性，判断当前选中图书是否为私密阅读状态
      isPrivate() {
        if (!this.isSelected) {
          return false
        } else {
          // 如果选中图书，需要它每一本书都是private状态才会判断他是private
          return this.shelfSelected.every(item => item.private)
        }
      },
      // 计算属性，判断是否下载过
      isDownload() {
        if (!this.isSelected) {
          return false
        } else {
          return this.shelfSelected.every(item => item.cache)
        }
      }
    },
    data() {
      return {
        // 私密阅读popup组件变量，方便隐藏popup弹窗
        popupMenu: null
      }
    },
    methods: {
      // 同步的方式，首先遍历我们选中的书籍
      async downloadSelectedBook() {
        // 遍历我们选中的书籍
        for (let i = 0; i < this.shelfSelected.length; i++) {
          // 针对我们遍历出来的结果做一个下载
          await this.downloadBook(this.shelfSelected[i]).then(book => {
              book.cache = true
            })
        }
      },
      // 一本电子书的实际的下载，我们是通过一个promise对象
      downloadBook(book) {
        console.log('downloadBook', book)
        let text = ''
        // // 调用toast弹窗组件,不停的更新toast的文本
        // const toast = this.toast({
        //   text
        // })
        // 持续的跟新toast弹窗内容
        // toast.continueShow()
        return new Promise((resolve, reject) => { // 初始化pedding 成功态 resolve reject
          // 电子书离线缓存下载的API，这个api提供的躬能，就是传入book会将电子书下载下来
          // download接口api
          download(book, book => {
            console.log('下载完毕')
            // todo: toast.hide()，下载完毕后将toast进行隐藏
            // toast.remove()
            // promise对象调用resolve()
            resolve(book)
          }, reject, progressEvent => {
            // 进度计算，progressEvent.loaded当前读了多少，progressEvent.total总共要读多少，比就是下载进度
            const progress = Math.floor(progressEvent.loaded / progressEvent.total * 100) + '%'
            // /进度文本
            text = this.$t('shelf.progressDownload').replace('$1', `${book.fileName}.epub(${progress})`)
            console.log(text)
            // todo:
            this.$emit('showMyToast', text)
            // toast.updateText(text)
            // todo:  toast持续更新显示，有一个更新的文本
          })
        })
      },
      // 删除选中书籍的缓存
      removeSelectedBook() {
        Promise.all(this.shelfSelected.map(book => this.removeBook(book))).then(books => {
            books.map(book => {
              book.cache = false
            })
            saveBookShelf(this.shelfList)
            // this.simpleToast(this.$t('shelf.removeDownloadSuccess'))
            // todo: 弹窗
            this.$emit('showMyToast', this.$t('shelf.removeDownloadSuccess'))
          })
      },
      // 实际每一本书的删除离线缓存
      removeBook(book) {
        return new Promise((resolve, reject) => {
          // 删除localStorge里的电子书
          removeLocalStorage(`${book.categoryText}/${book.fileName}-info`)
          // 删除离线的电子书
          removeLocalForage(`${book.fileName}`)
          resolve(book)
        })
      },
      // 隐藏popup弹窗
      hidePopup() {
        this.popupMenu.hide()
      },
      // 减少代码冗余，所有按钮完成后的操作
      onComplete() {
        // 隐藏popup弹窗
        this.hidePopup()
        // 将编辑状态至为false
        this.setIsEditMode(false)
        // 在这里shelfSelected选中书籍列表是，书架列表的一个引用，所以shelfSelected里面变化，shelfList也会变化。
        saveBookShelf(this.shelfList)
      },
      // 设置私密阅读方法,会向数据库传递值
      setPrivate() {
        console.log('setPrivate')
        // 计算属性，判断当前选中的所有图书是否为私密阅读状态
        let isPrivate
        if (this.isPrivate) {
          // 当全部是私密阅读的时候，将选中的书籍的private全部设置为false不要私密阅读
          // 接口，向数据库传值，将选中的书籍的private设置为false,可以不需要
          isPrivate = false
        } else {
          // 当全部不是私密阅读，或则部分不是私密阅读，我们将选中的书籍全部设置为true私密阅读
           // 接口，向数据库传值，将选中的书籍的private设置为true，可以不需要
          isPrivate = true
        }
        // 将localStorge的选中书籍的private属性，全部进行设置。
        this.shelfSelected.forEach(book => {
          book.private = isPrivate
        })
        // 按钮完成的操作，隐藏popup弹窗，将编辑状态设置为false，将书架的内容保存到localStorge中，
        // 在这里shelfSelected选中书籍列表是，书架列表的一个引用，所以shelfSelected里面变化，shelfList也会变化。
        this.onComplete()
        // 完成后，如果设置为私密阅读弹出什么，如果不是弹出什么
        if (isPrivate) {
          // createApi方法弹出弹窗
          console.log('弹框')
          // 子组件触发父组件的事件
          this.$emit('showMyToast', '已开启私密阅读,阅读记录不再公开')
          // this.simpleToast(this.$t('shelf.setPrivateSuccess'))
        } else {
          this.$emit('showMyToast', '已关闭私密阅读')
          // this.simpleToast(this.$t('shelf.closePrivateSuccess'))
        }
      },
      // 同步，电子书离线下载设置
      async setDownload() {
        this.onComplete()
        if (this.isDownload) {
          this.removeSelectedBook()
        } else {
          // 实际下载的方法
          await this.downloadSelectedBook()
          saveBookShelf(this.shelfList)
          // this.simpleToast(this.$t('shelf.setDownloadSuccess'))
          this.$emit('showMyToast', this.$t('shelf.setDownloadSuccess'))
        }
      },
      // 移出所选的书籍
      removeSelected() {
        // 返回的是数组
        const fileNames = this.shelfSelected.map(selected => selected.fileName)
        console.log('被删除的书籍列表', fileNames)
        // api将数据库中书架列表的书籍删了
        removeFromShelf(fileNames)
        // 首先遍历我们所选中的图书，在shelfList是否存在，如果存在就将他移出
         this.shelfSelected.forEach(selected => {
          this.setShelfList(this.shelfList.filter(book => book !== selected))
        })
        // 将选中的书籍清空
        this.setShelfSelected([])
        // 1隐藏弹出的popup,2取消编辑状态，3将所有修改的图书保存到localStorge的书架中
        this.onComplete()
      },
      // 展示私密阅读popup
      showPrivate() {
        // 直接调用create-api的popup展示私密阅读的popup
        this.popupMenu = this.popup({
          // title: '123'
          title: this.isPrivate ? this.$t('shelf.closePrivateTitle') : this.$t('shelf.setPrivateTitle'),
          btn: [
            {
              text: this.isPrivate ? this.$t('shelf.close') : this.$t('shelf.open'),
              click: () => {
                // 设置私密阅读方法
                this.setPrivate()
              }
            },
            {
              text: this.$t('shelf.cancel'),
              click: () => {
                this.hidePopup()
              }
            }
          ]
        }).show()
      },
      showDownload() {
        this.popupMenu = this.popup({
          title: this.isDownload ? this.$t('shelf.removeDownloadTitle') : this.$t('shelf.setDownloadTitle'),
          btn: [
            {
              text: this.isDownload ? this.$t('shelf.delete') : this.$t('shelf.open'),
              click: () => {
                this.setDownload()
              }
            },
            {
              text: this.$t('shelf.cancel'),
              click: () => {
                this.hidePopup()
              }
            }
          ]
        }).show()
      },
      // 移出所选的书籍
      showRemove() {
        let title
        // 当选择为一本书，显示不同的title内容
        if (this.shelfSelected.length === 1) {
          title = this.$t('shelf.removeBookTitle').replace('$1', `《${this.shelfSelected[0].title}》`)
        } else {
          title = this.$t('shelf.removeBookTitle').replace('$1', this.$t('shelf.selectedBooks'))
        }
        this.popupMenu = this.popup({
          title: title,
          btn: [
            {
              text: this.$t('shelf.removeBook'),
              type: 'danger',
              click: () => {
                this.removeSelected()
              }
            },
            {
              text: this.$t('shelf.cancel'),
              click: () => {
                this.hidePopup()
              }
            }
          ]
        }).show()
      },
      // 底部栏每个item的点击
      onTabClick(item) {
        if (!this.isSelected) {
          return
        }
        switch (item.index) {
          case 1:
            this.showPrivate()
            break
          case 2:
            this.showDownload()
            break
          case 3:
            // createAPI调用弹窗
            this.dialog().show()
            break
          case 4:
            this.showRemove()
            break
          default:
            break
        }
      },
      // label方法，设置底部栏下发文本显示
      label(item) {
        switch (item.index) {
          case 1:
            return this.isPrivate ? item.label2 : item.label
          case 2:
            return this.isDownload ? item.label2 : item.label
          default:
            return item.label
        }
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../../assets/styles/global";

  .shelf-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 120;
    display: flex;
    width: 100%;
    height: px2rem(96);
    background: white;
    box-shadow: 0 px2rem(-2) px2rem(4) 0 rgba(0, 0, 0, .1);
    .shelf-footer-tab-wrapper {
      flex: 1;
      width: 25%;
      height: 100%;
      .shelf-footer-tab {
        width: 100%;
        height: 100%;
        opacity: .5;
        @include columnCenter;
        &.is-selected {
          opacity: 1;
        }
        .tab-icon {
          font-size: px2rem(20);
          color: #666;
        }
        .tab-text {
          margin-top: px2rem(5);
          font-size: px2rem(12);
          color: #666;
          &.remove-text {
            color: $color-pink;
          }
        }
        .icon-shelf {
          color: $color-pink;
        }
      }
    }
  }
</style>
